z<template>
<div id="stockOpe">
  <div class="blankLin"></div>
  <div class="header lHeader">
    <span class="line"></span>
    <div class="text">股票操作</div>
    <span class="line"></span>
  </div>
  <div class="stockContent" v-show='status == 0'>
    <div class="stockCharts">
      <div ref="mChartLeft" style="width:50%;height:160px" class="fl">
      </div>
      <div ref="mChartRight" style="width:50%;height:160px" class="fr">
      </div>
    </div>
    <div class="describe">
      <div class="left">超过<span v-text='positionIndex'></span>股民</div>
      <div class="right">超过<span v-text='retracementMaxIndex'></span>股民</div>
    </div>
  </div>
  <return-empty v-show='status == 1'></return-empty>
  <return-error v-show='status == 2'></return-error>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import RemoteDAO from '@/common/remoteDAO'

const myOpe = {
  tooltip: {
    show: false,
    trigger: 'axis',
    showContent: false
  },
  calculable: false,
  color: ['#ddd', '#ff7c00'],
  series: [{
    type: 'pie',
    radius: ['70%', '75%'],
    clockwise: false,
    label: {
      normal: {
        show: true,
        position: 'center',
        textStyle: {
          fontSize: 20
        }
      },
      silent: true
    }
  }]
}

export default {
  props: ['fathertime', 'monthstatus'],
  data() {
    return {
      positionIndex: '',
      retracementMaxIndex: '',
      myChartLeft: '',
      myChartRight: '',
      status: 0
    }
  },
  created() {
    this.initStock();
  },
  beforDestroy() {
    echarts.dispose(this.myChartLeft)
    echarts.dispose(this.myChartRight)
  },
  watch: {
    fathertime: function() {
      this.initStock();
    },
    monthstatus: function() {
      this.initStock();
    }
  },
  methods: {
    initStock() {
      let vm = this;
      if (vm.fathertime) {
        let obj0043 = {
          "recent": vm.fathertime
        };
        RemoteDAO.callZL13100043(obj0043, vm.ZL13100043);
      }
    },
    ZL13100043(result) {
      let vm = this;
      if (result.error == '1') {
        vm.status = 2
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        specData.length == 0 ? vm.status = 1 : vm.drawStickOpe(specData)
      }
    },
    drawStickOpe(specData) {
      let vm = this;
      vm.positionIndex = specData[0]._source.position_index + '%';
      vm.retracementMaxIndex = specData[0]._source.retracement_max_index + '%';
      vm.$nextTick(() => {
        if (!vm.myChartLeft) {
          vm.myChartLeft = echarts.init(vm.$refs.mChartLeft);
          vm.myChartRight = echarts.init(vm.$refs.mChartRight);
          vm.myChartLeft.setOption(myOpe)
          vm.myChartRight.setOption(myOpe)
        }
        vm.myChartLeft.setOption({
          series: [{
            data: [{
                value: 100 - specData[0]._source.position_avg,
                name: '平均仓位'
              },
              {
                value: specData[0]._source.position_avg,
                name: specData[0]._source.position_avg + '%'
              }
            ]
          }]
        });
        vm.myChartRight.setOption({
          series: [{
            data: [{
                value: 100 - specData[0]._source.retracement_max,
                name: '最大回撤'
              },
              {
                value: specData[0]._source.retracement_max,
                name: specData[0]._source.retracement_max + '%'
              }
            ]
          }]
        })
      })
    }
  }
}
</script>
<style scoped>
#stockOpe {
  padding-bottom: 25px;
}

#stockOpe .lHeader {
  margin-top: 40px;
}

.stockContent {
  text-align: center;
  overflow: hidden;
}

.describe {
  font-size: 20px;
  margin-bottom: 70px;
  text-align: center;
  color: #999;
}

.describe div {
  width: 50%;
  float: left;
}

.blankLin {
  height: 14px;
  background-color: #f6f6f6;
}
</style>
